<template>
    <view class="container">
        <view class="mood-header">
            <view class="mood-date">
                <text>{{ record.date }}</text>
                <text 
                    class="mood-level" 
                    :class="{
                        'level-1': record.moodLevel === 1,
                        'level-2': record.moodLevel === 2,
                        'level-3': record.moodLevel === 3,
                        'level-4': record.moodLevel === 4,
                        'level-5': record.moodLevel === 5
                    }"
                >
                    {{ getMoodLevelLabel(record.moodLevel) }}
                </text>
            </view>
        </view>

        <view class="mood-description">
            <text>{{ record.description }}</text>
        </view>

        <view class="mood-media" v-if="record.images && record.images.length">
            <view class="media-title">图片记录</view>
            <scroll-view scroll-x class="image-scroll">
                <image 
                    v-for="(img, index) in record.images" 
                    :key="index" 
                    :src="img" 
                    mode="aspectFill"
                    @tap="previewImage(img)"
                ></image>
            </scroll-view>
        </view>

        <view class="mood-voice" v-if="record.voice">
            <view class="media-title">语音记录</view>
            <view class="voice-player">
                <text class="duration">{{ record.voice.duration }}″</text>
                <button 
                    class="play-btn" 
                    @tap="playVoice"
                    :disabled="isPlaying"
                >
                    {{ isPlaying ? '播放中...' : '播放' }}
                </button>
            </view>
        </view>

        <view class="mood-analysis">
            <view class="media-title">AI情绪分析</view>
            <view class="analysis-content">
                <text>{{ record.aiAnalysis }}</text>
            </view>
        </view>

        <view class="actions">
            <button 
                class="delete-btn" 
                @tap="confirmDelete"
            >
                删除记录
            </button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            record: null,
            isPlaying: false,
            moodLevels: [
                { value: 1, label: '非常糟糕' },
                { value: 2, label: '糟糕' },
                { value: 3, label: '一般' },
                { value: 4, label: '好' },
                { value: 5, label: '非常好' }
            ]
        }
    },
    onLoad(options) {
        this.fetchRecordDetail(options.id);
    },
    methods: {
        async fetchRecordDetail(id) {
            try {
                this.record = await this.$api.mood.getMoodRecordDetail(id);
            } catch (error) {
                uni.showToast({
                    title: '加载详情失败',
                    icon: 'none'
                });
            }
        },
        getMoodLevelLabel(level) {
            const moodLevel = this.moodLevels.find(l => l.value === level);
            return moodLevel ? moodLevel.label : '';
        },
        previewImage(url) {
            uni.previewImage({
                urls: this.record.images,
                current: url
            });
        },
        playVoice() {
            if (this.record.voice && !this.isPlaying) {
                this.isPlaying = true;
                uni.playVoice({
                    filePath: this.record.voice.tempFilePath,
                    complete: () => {
                        this.isPlaying = false;
                    }
                });
            }
        },
        confirmDelete() {
            uni.showModal({
                title: '删除确认',
                content: '确定要删除这条心情记录吗？',
                success: async (res) => {
                    if (res.confirm) {
                        try {
                            await this.$api.mood.deleteMoodRecord(this.record.id);
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success'
                            });
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1500);
                        } catch (error) {
                            uni.showToast({
                                title: '删除失败',
                                icon: 'none'
                            });
                        }
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8F8;
    height: 100vh;
    padding: 24px;
}

.mood-header {
    margin-bottom: 24px;
}

.mood-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mood-level {
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 12px;
}

.level-1 { background-color: #FF4D4F; color: white; }
.level-2 { background-color: #FF7A45; color: white; }
.level-3 { background-color: #FAAD14; color: white; }
.level-4 { background-color: #52C41A; color: white; }
.level-5 { background-color: #1AAD19; color: white; }

.mood-description {
    background-color: white;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.media-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.mood-media {
    margin-bottom: 24px;
}

.image-scroll {
    white-space: nowrap;
    overflow-x: auto;
}

.image-scroll image {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    margin-right: 12px;
    object-fit: cover;
}

.mood-voice {
    margin-bottom: 24px;
}

.voice-player {
    background-color: white;
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.duration {
    margin-right: 12px;
}

.play-btn {
    background-color: #1AAD19;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
}

.play-btn:disabled {
    background-color: #cccccc;
}

.mood-analysis {
    margin-bottom: 24px;
}

.analysis-content {
    background-color: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.actions {
    margin-top: 24px;
}

.delete-btn {
    width: 100%;
    background-color: #FF4D4F;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 32px;
}
</style> 